﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Ajax.Master" Inherits="System.Web.Mvc.ViewPage<JLL.China.Web.Areas.Portal.Models.EventModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <div id="ajax-wrapper">
        <div id="step-holder">
            <div class="step-no">
                1</div>
            <div class="step-dark-left">
                Event Details</div>
            <div class="step-dark-round">
                &nbsp;</div>
            <div class="clear">
            </div>
        </div>
        <div id="content">
            <%Html.RenderPartial("QuickForm", this.Model); %>
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CSS" runat="server">
    <link href="<%=Url.Content("~/Scripts/jquery.validation/validationEngine.jquery.css")%>"
        rel="stylesheet" type="text/css" />
    <link href="<%=Url.Content("~/Scripts/chosen/chosen.css")%>" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
     <link href="<%=Url.Content("~/Scripts/timepicker/jquery-ui-timepicker-addon.css")%>" rel="stylesheet"
        type="text/css" />   
    <!-- colorpicker -->
    <link href="<%=Url.Content("~/Scripts/colorpicker/colorPicker.css")%>" rel="stylesheet"
        type="text/css" />
         <link href="<%=Url.Content("~/Scripts/qtip2/jquery.qtip.min.css") %>" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="JS" runat="server">
      <script src="<%=Url.Content("~/Scripts/datepicker/jquery-ui.js")%>" type="text/javascript"></script>
          <script src="<%=Url.Content("~/Scripts/timepicker/jquery-ui-sliderAccess.js")%>" type="text/javascript"></script>
    <script src="<%=Url.Content("~/Scripts/timepicker/jquery-ui-timepicker-addon.js")%>" type="text/javascript"></script>
    <script src="<%=Url.Content("~/Scripts/colorpicker/jquery.colorPicker.js")%>" type="text/javascript"></script>

    <script src="<%=Url.Content("~/Scripts/colorpicker/jquery.colorPicker.min.js")%>"
        type="text/javascript"></script>
          <script src="<%=Url.Content("~/Scripts/jquery.validation/jquery.validationEngine-en.js")%>"
        type="text/javascript"></script>

    <script src="<%=Url.Content("~/Scripts/jquery.validation/jquery.validationEngine.js")%>"
        type="text/javascript"></script>

    <script src="<%=Url.Content("~/Scripts/chosen/chosen.jquery.min.js")%>" type="text/javascript"></script>
    <script src="<%=Url.Content("~/Scripts/qtip2/jquery.qtip.min.js")%>" type="text/javascript"></script>
    <script src="<%=Url.Content("~/Scripts/ckeditor/ckeditor.js")%>" type="text/javascript"></script>

    <script type="text/javascript" src="<%=Url.Content("~/Scripts/ckeditor/adapters/jquery.js")%>"></script>
    <script language="javascript" type="text/javascript">

        $(document).ready(
            function() {
                //Datetime
                $('#EventDate').datepicker({
                    showButtonPanel: true,
                    showAnim: "fadeIn",
                    onClose: function(selectedDate) {
                        $("#EventDateEnd").datepicker("option", "minDate", selectedDate);
                    }
                });
                $('#EventDateEnd').datepicker({
                    showButtonPanel: true,
                    showAnim: "fadeIn",
                    onClose: function(selectedDate) {
                        $("#EventDate").datepicker("option", "maxDate", selectedDate);
                    }
                });
                $("#EventDateEnd").datepicker("option", "dateFormat", "dd-M-yy");
                $("#EventDate").datepicker("option", "dateFormat", "dd-M-yy");
          
                $('#EventTime').timepicker({
                    hourGrid: 4,
                    minuteGrid: 10,
                    timeFormat: 'hh:mm tt'
                });


                $('#EventTimeEnd').timepicker({
                    hourGrid: 4,
                    minuteGrid: 10,
                    timeFormat: 'hh:mm tt'
                });

                //

                $("#formID").validationEngine({
                    prettySelect: true,
                    useSuffix: "_chzn",
                    promptPosition: "topLeft"
                });
                $('.ckeditors').ckeditor();
                $(".chzn-nosearch").chosen({ disable_search_threshold: 3 });
                $('.datedatapicker').datepicker(); //{dateFormat: 'mm/dd/yy' }

                // Event color
                $("#color-event").live('click', function() {

                    var obj = $(this).qtip({
                        overwrite: true, // Force one tooltip per event
                        content: {
                            text: '<p>Choose an event color:</p> <ul class="tool-color"><li><a title="none" class="item-color" id="FAD165"  style="background-color:#FAD165"></a></li><li><a class="ecp-dt-hr"></a></li><li><a class="item-color" title="bold blue"   id="5484ED" style="background-color:#5484ED"></a></li><li><a id="A4BDFC" title="blue"   class="item-color" style="background-color:#A4BDFC"></a></li><li><a id="46D6DB" title="turquoise"   class="item-color" style="background-color:#46D6DB"></a></li><li><a id="7AE7BF" title="green"   class="item-color" style="background-color:#7AE7BF"></a></li><li><a id="51B749" title="bold green"  class="item-color" style="background-color:#51B749"></a></li><li><a id="FBD75B" title="yellow"   class="item-color" style="background-color:#FBD75B"></a></li><li><a id="ffb878" title="orange"   class="item-color" style="background-color:#ffb878"></a></li><li><a id="ff887c" title="red"   class="item-color" style="background-color:#ff887c"></a></li><li><a id="DC2127" title="bold red"  class="item-color" style="background-color:#DC2127"></a></li><li><a id="DBADFF" title="purple"  class="item-color" style="background-color:#DBADFF"></a></li><li><a id="E1E1E1" title="gray"   class="item-color" style="background-color:#E1E1E1"></a></li></ul>'
                        }, // Use the event description from the event.data object
                        position: {
                            my: 'top left ', // Position the tooltip...
                            at: ' left bottom ', // ...at the bottom of the event
                            viewport: $(window) // Try to keep the tooltip onscreen at all times
                        },
                        show: {
                            event: 'click', // Show the tooltip when event is clicked and tooltip is 'ready' e.g. rendered
                            ready: true
                        },
                        hide: 'unfocus', // Hide when the tooltip loses focus
                        style: {
                            classes: 'qtip-wiki qtip-light qtip-shadow qtip-tool-color' // Apply a dark theme to make it look extra sexy...
                        },
                        events: {
                            show: function() {
                                $(".item-color").live().each(function() {
                                    var self = (this);
                                    var currentcolor = ($("#color-event-value").val());
                                    if (currentcolor == ("#" + self.id)) {
                                        var imgsrc = BASE_URL + "Content/images/symbol_check.gif";
                                        $(this).html('<img id="detail-icon-img" src="' + imgsrc + '" style="position:absolute">');

                                    }
                                });
                            }
                        }
                    });
                });
                //
                //Action when chosen color
                $(".item-color").live('click', function() {
                    var self = (this);
                    var color = "#" + self.id;
                    $(".item-color").html("");
                    var imgsrc = BASE_URL + "Content/images/symbol_check.gif";
                    $(this).html('<img id="detail-icon-img" src="' + imgsrc + '" style="position:absolute">');
                    $("#color-event").css("background", color);
                    $("#color-event-value").val(color);


                });


            });
          
         function checkForm() {
            $(document).ready(function() {
                if ($('#summary').val().length > 3) {
                    $('#summary_validate').val('ok');
                }
                else {
                    $('#summary_validate').val('');
                }

                if ($('#event_content').val().length > 3) {
                    $('#content_validate').val('ok');
                }
                else {
                    $('#content_validate').val('');
                }

                if ($('#summary_local').val().length > 3) {
                    $('#summary_local_validate').val('ok');
                }
                else {
                    $('#summary_local_validate').val('');
                }

                if ($('#content_local').val().length > 3) {
                    $('#content_local_validate').val('ok');
                }
                else {
                    $('#content_local_validate').val('');
                }

            });
        }

       
    </script>
</asp:Content>
